/* 遇到的问题 */
//由于使用了offsetX/Y，在最后的效果中，mask出现了抖动现象，应该是事件的问题
//在mask属性中添加pointer-events: none;使mask不参与鼠标事件，就解决了问题

/* 图片数据 */
var imgs = {
    // 小图
    small: ['imgA_1.jpg', 'imgB_1.jpg', 'imgC_1.jpg'],
    // 中图
    middle: ['imgA_2.jpg', 'imgB_2.jpg', 'imgC_2.jpg'],
    // 大图
    large: ['imgA_3.jpg', 'imgB_3.jpg', 'imgC_3.jpg']
}


/* 封装获取元素方法 */
function $(selector) {
    return document.querySelector(selector);
}
/* 获取元素 */
var middleImg = $(".leftImg");
var smallImg = $(".imgList");
var largeImg = $(".rightImg");
var mask = $(".mask");

/* 初始化样式 */
function init() {
    //渲染缩略图
    var str = '';
    for (let i = 0; i < imgs.small.length; i++) {
        str += `<li style="background-image: url(./images/${imgs.small[i]});"></li>`
    }
    smallImg.innerHTML = str;
    //默认选中第一个
    $('.imgList li').style.border = '2px solid #000';
}
init();

/* 绑定事件 */
function bindEvent() {
    /* 1.缩略图点击事件 */
    /* ✨🎉🔖💡📝❤️🔔🔍🎇🎀🎠🎃🎞️🎢 */
    /* smallImg是ul标签，通过事件委托，找出点击源 */
    smallImg.onclick = function (e) {
        if (e.target.tagName == "LI") {
            //取消所有li的边框
            var lis = document.getElementsByTagName("li");
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.border = '2px solid #eee';
            }
            //给当前li加边框
            e.target.style.border = "2px solid #000";


            //记录当前li索引，以选择大图
            //🎢🎞️🎃🎠🎇🔍
            //lis是一个类数组，想要用数组方法就用call改变this指向
            var index = [].indexOf.call(lis, e.target);
            middleImg.style.backgroundImage = `url(./images/${imgs.middle[index]})`;
            largeImg.style.backgroundImage = `url(./images/${imgs.large[index]})`;
        }
    }


    /* 2.鼠标在目标元素移动事件 */
    middleImg.onmousemove = function (e) {
        mask.style.opacity = 1;
        largeImg.style.opacity = 1;
        console.log("offset: " + e.offsetX, e.offsetY);
        console.log("client: " + e.clientX, e.clientY);
        /* mask元素的left=鼠标距离middleImg的left-mask的宽的一半*/
        var left = e.offsetX - mask.offsetWidth / 2;
        var top = e.offsetY - mask.offsetHeight / 2;
        // var left = e.clientX - middleImg.offsetLeft - mask.offsetWidth / 2;
        // 同理
        // var top = e.clientY - middleImg.offsetTop - mask.offsetHeight / 2;

        //边界条件
        if (left <= 0) {
            left = 0;
        }
        if (top <= 0) {
            top = 0;
        }
        if (left >= middleImg.offsetWidth - mask.offsetWidth) {
            left = middleImg.offsetWidth - mask.offsetWidth
        }
        if (top >= middleImg.offsetHeight - mask.offsetHeight) {
            top = middleImg.offsetHeight - mask.offsetHeight
        }
        mask.style.left = left + 'px';
        mask.style.top = top + 'px';


        //修改大图位置
        largeImg.style.backgroundPositionX = -left + 'px';
        largeImg.style.backgroundPositionY = -top + 'px';
    }
    /* 3.鼠标移出事件 */
    middleImg.onmouseleave = function (e) {
        // 让遮罩层和大图消失
        mask.style.opacity = 0;
        largeImg.style.opacity = 0;
    }
}
bindEvent();